<template>
    <div class="luck-draw">
        <p>您当前剩余抽奖次数为：{{$store.state.lognUser.luckNumber}}</p>
        <div class="turntable">
            <div v-for="(item, index) in luckDraw" :key="index" @click="start(index)" :class="{choose: num == index, start: index == 4}" :disabled="running">{{item}}</div>
        </div>
    </div>
</template>

<script>
    import {sendwithpost} from "../../network/profile";
    let intervalID;
    export default {
        name: "LuckDraw",
        data() {
            return {
                luckDraw: ['谢谢惠顾','谢谢惠顾',"9折",'谢谢惠顾','开始','谢谢惠顾',"8折","9.5折","8.8折"],
                num: 0,
                running: false
            }
        },
        methods: {

            start(index) {
                if(this.$store.state.lognUser.luckNumber > 0) {
                    if (intervalID) {
                        return;
                    }
                    if (index != 4) {
                        return
                    }else {
                        let current = 0
                        intervalID = setInterval(()=>{
                            this.num = Math.floor(Math.random() * 10)
                            if (this.num == 4) {
                                this.num++
                            }
                            if (this.num == 9) {
                                this.num = 0
                            }
                            current ++
                            if (current == 9) {
                                clearInterval(intervalID)
                                intervalID = null
                                sendwithpost({
                                    url: '/luck',
                                    data: {
                                        discount: this.luckDraw[this.num]
                                    }
                                }).then(res=> {
                                    this.$store.dispatch('getUser')
                                })
                            }
                        },300)
                    }
                }else {
                    this.$message({
                        showClose: true,
                        message: '当前抽奖次数不足',
                        type: 'warning'
                    })
                    return;
                }
            }
        }
    }
</script>

<style scoped>
    .luck-draw {
        margin-top: 200px;
    }
    .turntable {
         display: flex;
        justify-content: space-between;
        flex-flow: row wrap;
        width: 620px;
        height: 620px;
        margin: 0 auto;
        border-collapse:collapse;

    }
    .turntable > * {
        border: 1px solid red;
        width: 33%;
        height: 33%;
        text-align: center;
        line-height: 210px;
    }
    .choose {
        background-color: yellow;
    }
    .start {
        background-color: red;
        cursor: pointer;

    }
</style>